<template>
	<view class="templateDetails">
		<!-- 内容区 -->
		<view class="templateDetailsCon">
			<!-- 每一项 -->
			<view 
				v-for="(item,index) in data.templateDetailsList"
				:key="index"
				class="templateDetailsItem"
			>
				<!-- 每一项-上面的图 -->
				<view class="templateDetailsItemTop" @click="previewSingleImage(item.url)">
					<image :src="item.url" mode="aspectFit" class="templateDetailsItemImg"></image>
				</view>
				<!-- 每一项-下面的字 -->
				<view class="templateDetailsItemBottom">
					<text class="templateDetailsItemText">{{item.name}}</text>
					<text class="templateDetailsItemButton">下载模版</text>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="templateDetailsBottomButton">
			<text class="templateDetailsBottomButtonText">打包下载（复制下载链接）</text>
		</view>
		<!-- 没有更多-占位 -->
		<view class="templateDetailsZhanWei">没有更多了呦~</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const ipt_content = ref("");
	
	const data = ref({
		templateDetailsList:[
			{
				id:1,
				url:'../../static/employment/templateDetailsImg1.png',
				name:'创意1'
			},
			{
				id:2,
				url:'../../static/employment/templateDetailsImg2.png',
				name:'创意2'
			},
			{
				id:3,
				url:'../../static/employment/templateDetailsImg3.png',
				name:'创意3'
			},
			{
				id:4,
				url:'../../static/employment/templateDetailsImg4.png',
				name:'创意4'
			},
			{
				id:5,
				url:'../../static/employment/templateDetailsImg5.png',
				name:'创意5'
			},
			{
				id:6,
				url:'../../static/employment/templateDetailsImg6.png',
				name:'创意6'
			},
			{
				id:7,
				url:'../../static/employment/templateDetailsImg7.png',
				name:'创意7'
			},
			{
				id:8,
				url:'../../static/employment/templateDetailsImg8.png',
				name:'创意8'
			},
			{
				id:9,
				url:'../../static/employment/templateDetailsImg9.png',
				name:'创意9'
			},
			{
				id:10,
				url:'../../static/employment/templateDetailsImg10.png',
				name:'Red'
			},
			{
				id:11,
				url:'../../static/employment/templateDetailsImg11.png',
				name:'Orange'
			},
			{
				id:12,
				url:'../../static/employment/templateDetailsImg1.png',
				name:'Grey'
			}
		]
	})
	
	// 单张图片预览功能
	const previewSingleImage = (url: any) => {
		console.log('点击了图片，放大：',url)
		
		uni.previewImage({
			current: url, // 当前显示图片的URL
			urls: [url], // 只包含当前图片的数组
			indicator: 'none', // 不显示指示器
			loop: false, // 不可循环
			fail: (err) => {
				console.error('预览图片失败:', err);
				uni.showToast({
					title: '预览图片失败',
					icon: 'none'
				});
			}
		});
	}
</script>

<style scoped>
/* 模版详情-内容区 */
.templateDetailsCon {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 80rpx 25rpx 30rpx 25rpx;
	/* background: pink; */
}
/* 每一项 */
.templateDetailsItem {
	display: flex;
	flex-direction: column;
	width: 30%;
	box-sizing: border-box;
	/* background: orange; */
	margin: 10rpx;
}
/* 每一项-图片 */
.templateDetailsItemImg {
	width: 100%;
	height: 280rpx;
	border-radius: 20rpx;
	border: 4rpx solid #ccc;
}
/* 每一项-下面的内容（文字+按钮） */
.templateDetailsItemBottom {
	display: flex;
	flex-direction: column;
	padding-left: 15rpx;
}
/* 每一项-下面的内容-文字 */
.templateDetailsItemText {
	margin: 10rpx 0 6rpx 0;
	font-weight: bold;
	font-size: 26rpx;
}
/* 一项-下面的内容-按钮 */
.templateDetailsItemButton {
	text-align: center;
	color: #fff;
	font-weight: 700;
	background: linear-gradient(to bottom,#ffc854,#ff9d2a);
	border-radius: 12rpx;
}
/* 底部按钮-固定底部 */
.templateDetailsBottomButton {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 150rpx;
	padding: 20rpx 30rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
}
.templateDetailsBottomButtonText {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	color: #fff;
	font-size: 36rpx;
	font-weight: 700;
	border-radius: 26rpx;
	background: linear-gradient(to bottom,#ffc854,#ff9d2a);
}

/* 没有更多占位 */
.templateDetailsZhanWei {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 270rpx;
	padding-top: 25rpx;
	font-size: 32rpx;
	color:#ccc;
}

/* 添加点击效果 */
.templateDetailsItemTop {
	cursor: pointer;
	transition: transform 0.2s;
}
.templateDetailsItemTop:active {
	transform: scale(0.98);
}
</style>